<template>
  <div class="page-pay_result" @click="websocketsend('哈哈哈')">
    <template v-if="status == 'wait'">
      <div class="wait">
        <div class="status-box">
          <div class="icon">
            <van-icon name="info-o" />
          </div>
          <div class="status_text">支付结果等待中...</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      websock: null,
      status: "wait" //wait等待中 ， sucess支付成功 ，faild支付失败
    };
  },
  computed: {},
  watch: {},
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      if (process.client) {
        if ("WebSocket" in window) {
          //初始化weosocket
          const wsuri = "ws://jeff.free.idcfengye.com/webSocket/111";
          this.websock = new WebSocket(wsuri);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onclose = this.websocketclose;
        }else{
            alert("当前浏览器不支持websocket")
        }
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: "12345" };
      console.log("成功建立socket连接")
    //   this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log(e);
    //   const redata = JSON.parse(e.data);
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    }
  },
  created() {
    this.initWebSocket();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-pay_result {
  margin: auto;
  max-width: 414px;
  .status-box {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      font-size: 80px;
      > i {
        color: #07c160;
      }
    }
    .status_text {
      margin-top: 12px;
      font-size: 18px;
      color: #010101;
    }
  }
}
</style>
